import React from "react";

import taskIcon from 'assets/task.png'
import bugIcon from 'assets/bug.png'

import { Kanban, Task } from "types";
import { useTasks } from "utils/task";
import { useTaskTypes } from "utils/task-type";
import { useKanbansQueryKey, useTasksModal, useTasksSearchParams } from "./kanbanutils";
import styled from "@emotion/styled";
import { Button, Card, Dropdown, Menu, Modal } from "antd";
import { CreateTask } from "./creat-task";
import { Mark } from "components/mark";
import { useDeleteKanban } from "utils/kanban";
import { Row } from "components/lib";
import { Drag, Drop, DropChild } from "components/drag-and-drop";


/**
 * 获取taskType 列表，根据id渲染图片
 */
const TasktypeIcon = ({ id }: { id: number }) => {
  const { data: taskTypes } = useTaskTypes()
  const name = taskTypes?.find(taskType => taskType.id === id)?.name

  if (!name) return null
  return (
    <img alt="task-Icon" src={name === 'task' ? taskIcon : bugIcon} />
  )
}



// 看板列
export const KanbanColumn = React.forwardRef<
  HTMLDivElement,
  { kanban: Kanban }
>(({ kanban, ...props }, ref) => {
    const { data: allTasks } = useTasks(useTasksSearchParams())
    // const {data:allTasks} = useTasks()
  
    const tasks = allTasks?.filter(task => task.kanbanId === kanban.id)
    
    return (<Container {...props} ref={ref}>
      <Row between={true}>
        <h3>{kanban.name}</h3>
        <More kanban={kanban}></More>
      </Row>
      <TasksContainer>
        <Drop
            type={"ROW"}
            direction={"vertical"}
            droppableId={String(kanban.id)}
          >
          <DropChild style={{ minHeight: "1rem" }}>
            {tasks?.map((task, taskIndex) => (
              <Drag
                key={task.id}
                index={taskIndex}
                draggableId={"task" + task.id}
              >
                <div>
                  <TaskCard key={task.id} task={task} />
                </div>
              </Drag>
            ))}
          </DropChild>
        </Drop>
        <CreateTask kanbanId={kanban.id} />
      </TasksContainer>
    </Container>)
  }
)

// 任务卡片
const TaskCard = ({ task }: { task: Task }) => {
  const { startEdit } = useTasksModal()
  const {name:keyword} = useTasksSearchParams()
  return (
    <Card onClick={() => startEdit(task.id)} style={{ marginBottom: "0.5rem" }} key={task.id}>
      <div>
        <Mark name={task.name} keyword={keyword}></Mark>
      </div>
      <TasktypeIcon id={task.typeId}></TasktypeIcon>
    </Card>
  )
}

// 删除'...'
const More = ({kanban}:{kanban:Kanban}) =>{
  const {mutateAsync} = useDeleteKanban(useKanbansQueryKey())
  
  const startEdit = () => {
    Modal.confirm({
      okText:'确定',
      cancelText:'取消',
      title:'确定删除看板吗？',
      onOk(){
       return mutateAsync({id:kanban.id})
      }
    })
  }

  const overlay = (
    <Menu>
      <Menu.Item>
        <Button type="link" onClick={startEdit}>删除</Button>
      </Menu.Item>
    </Menu>
  )

  return (
    <Dropdown overlay={overlay}>
      <Button type="link">...</Button>
    </Dropdown>
  )
}








export const Container = styled.div`
  min-width: 27rem;
  border-radius: 6px;
  background-color: rgb(244,245,247);
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.7rem 1rem;
  margin-right: 1.5rem;
`
const TasksContainer = styled.div`
  overflow: scroll;
  flex: 1;
  ::-webkit-scrollbar{
    display: hone;
  }
`